<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" href="../../css/mui.min.css" />
<link rel="stylesheet" href="../../css/app.css" />
<style type="text/css">
	.mui-slider-group {
		position: absolute !important;
		width: 100%;
		top: 80px;
		bottom: 0;
	}
	.mui-slider-item {
		overflow: hidden;
	}
	.mui-popover {
        position: fixed;
        top: 16px;
        right: 6px;
        /*height: 180px;*/
        width: 120px;
    }
    .mui-popover .mui-popover-arrow {
        left: auto;
        right: 6px;
    }
</style>
</head>
<body>
	<div class="mui-content">
	    <div class="mui-slider" style="height: 100%;">
	        <div class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
	            <a class="mui-control-item" href="#item1">充值查询</a>
	            <a class="mui-control-item" href="#item2">消费查询</a>
	            <a class="mui-control-item" href="#item3">缴费查询</a>
	        </div>
	        <div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>
	        <div style="height: 40px;background-color: #fff;line-height: 40px;padding: 0 15px;">2016年8月
	        	<a href="#jfPopover" class="mui-pull-right">更多<span class="mui-icon mui-icon-arrowdown"></span></a>
	        </div>
	        <div class="mui-slider-group">
	            <div id="item1" class="mui-slider-item mui-control-content mui-active">
	            	<div>
		                <ul class="mui-table-view">
		                    <li class="mui-table-view-cell">第1个选项卡子项1</li>
		                    <li class="mui-table-view-cell">第1个选项卡子项2</li>
		                    <li class="mui-table-view-cell">第1个选项卡子项3</li>
		                    <li class="mui-table-view-cell">第1个选项卡子项4</li>
		                    <li class="mui-table-view-cell">第1个选项卡子项5</li>
		                    <li class="mui-table-view-cell">第1个选项卡子项</li>
		                    <li class="mui-table-view-cell">第1个选项卡子项</li>
		                    <li class="mui-table-view-cell">第1个选项卡子项</li>
		                    <li class="mui-table-view-cell">第1个选项卡子项</li>
		                    <li class="mui-table-view-cell">第1个选项卡子项</li>
		                    <li class="mui-table-view-cell">第1个选项卡子项</li>
		                    <li class="mui-table-view-cell">第1个选项卡子项</li>
		                    <li class="mui-table-view-cell">第1个选项卡子项</li>
		                    <li class="mui-table-view-cell">第1个选项卡子项</li>
		                    <li class="mui-table-view-cell">第1个选项卡子项</li>
		                    <li class="mui-table-view-cell">第1个选项卡子项</li>
		                    <li class="mui-table-view-cell">第1个选项卡子项</li>
		                    <li class="mui-table-view-cell">第1个选项卡子项</li>
		                    <li class="mui-table-view-cell">第1个选项卡子项</li>
		                    <li class="mui-table-view-cell">第1个选项卡子项</li>
		                </ul>
	            	</div>
	            </div>
	            <div id="item2" class="mui-slider-item mui-control-content">
	                <ul class="mui-table-view">
	                    <li class="mui-table-view-cell">第2个选项卡子项</li>
	                    <li class="mui-table-view-cell">第2个选项卡子项</li>
	                </ul>
	            </div>
	            <div id="item3" class="mui-slider-item mui-control-content">
	                <ul class="mui-table-view">
	                    <li class="mui-table-view-cell">第3个选项卡子项</li>
	                    <li class="mui-table-view-cell">第3个选项卡子项</li>
	                </ul>
	            </div>
	        </div>
	    </div>
        <div id="jfPopover" class="mui-popover">
            <ul class="mui-table-view">
            	<li class="mui-table-view-cell">item</li>
            	<li class="mui-table-view-cell">item</li>
            	<li class="mui-table-view-cell">item</li>
            	<li class="mui-table-view-cell">item</li>
            	<li class="mui-table-view-cell">item</li>
            </ul>
        </div>
	</div>
    <script src="../../js/mui.min.js"></script>
    <script src="../../libs/iscroll/build/iscroll.min.js"></script>
    <script type="text/javascript">
        (function ($, doc) {
        	$.init({
        	});

			doc.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

        	var scroll1 = new IScroll('#item1', {
//      		scrollbars: true
        	});
        	scroll1.on('scrollEnd', function () {
//      		console.log(this);
				/*if (this.y < 0) {
					$.toast('load......');
				} else {
					$.toast('refresh....');
				}
				return;*/
        		if (Math.abs(this.y) > 0) {
//      			var html = [];
        			for (var i = 0; i < 10; i++) {
//      				html.push();
						var li = doc.createElement('li');
						li.className = "mui-table-view-cell";
						li.innerText = "item" + (i + 1);
						$('#item1 ul')[0].appendChild(li);
        			}
        			scroll1.refresh();
        		}
        	});

        	$('#item1').on('tap', 'li', function () {
        	});

        })(mui, document);
    </script>
</body>
</html>